<template>
  <div class="nav">
    <ul>
      <li><a href="#">企业信息</a></li>
      <li><a href="#/#/productInfo" id="black">产品信息</a></li>
      <li><a href="/#/monitor">基地信息</a></li>
      <li><a href="#">地块信息</a></li>
      <li><a href="#">农事活动</a></li>
      <li><a href="/#/data">环境数据</a></li>
    </ul>
  </div>

  <div class="productInfo-header">
    <div class="productInfo-logo">
      <a href="/#/search"><img src="@/assets/logo1.png" alt=""></a>
    </div>
  </div>

  <div class="productInfo-content">
    <h1>产品信息</h1>

    <div class="block text-center pic-size">
      <el-carousel height="320px">
        <el-carousel-item v-for="item in 1" :key="item">
          <h3 class="small justify-center" text="2xl"><img src="@/assets/produce1.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item v-for="item in 1" :key="item">
          <h3 class="small justify-center" text="2xl"><img src="@/assets/produce2.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item v-for="item in 1" :key="item">
          <h3 class="small justify-center" text="2xl"><img src="@/assets/produce3.jpg" alt=""></h3>
        </el-carousel-item>
        <el-carousel-item v-for="item in 1" :key="item">
          <h3 class="small justify-center" text="2xl"><img src="@/assets/produce4.jpg" alt=""></h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <table id="information1">
      <tr>
        <th>产品名称:</th>
        <td>花生芽</td>
      </tr>
      <tr>
        <th>产品品牌:</th>
        <td>梦之芹</td>
      </tr>
      <tr>
        <th>产品级别:</th>
        <td>一级</td>
      </tr>
      <tr>
        <th>产品规格:</th>
        <td>500g</td>
      </tr>
      <tr>
        <th>生产日期:</th>
        <td>2020-10-10</td>
      </tr>
      <tr>
        <th>许可证编号:</th>
        <td></td>
      </tr>
    </table>

    <table id="information2">
      <tr>
        <th>储藏方法：</th>
        <td>真空包装</td>
      </tr>
      <tr>
        <th>保质期：</th>
        <td>1个月</td>
      </tr>
      <tr>
        <th>产品产地：</th>
        <td>湖北省孝感市云梦县隔蒲潭镇陈刘村</td>
      </tr>
      <tr>
        <th>原料产地：</th>
        <td>湖北省孝感市云梦县隔蒲潭镇陈刘村</td>
      </tr>
      <tr>
        <th>配料表：</th>
        <td>无</td>
      </tr>
      <tr>
        <th>营养成分：</th>
        <td></td>
      </tr>
      <tr>
        <th>净含量：</th>
        <td>500克</td>
      </tr>
      <tr>
        <th>产品简介：</th>
        <td>无土水培种植，不用肥，不用药，无公害绿色有机蔬菜。</td>
      </tr>
    </table>
  </div>

  <div class="footer">
    <p>Copyright©2008-2023 All Rights Reserved</p>
    <p>版权所有©武汉网酷科技有限公司 | 地址：湖北省武汉市洪山区雄楚大街428号 | 邮编：430074 | 技术支持： <a href="#" title="中南民族大学工程技术中心">中南民族大学</a> <a
        href="#" title="中南民族大学工程技术中心">湖北省制造企业智能管理工程技术研究中心</a></p>
    <p><a href="#" title="鄂ICP备16008630号-1">鄂ICP备16008630号-1</a></p>
  </div>

</template>

<script setup>

</script>

<style>
template {
  margin: 0 auto;
}

.nav ul {
  height: 60px;
  background-color: #d42a19;
  /* flexbox布局  使盒子水平居中 */
  display: flex;
  justify-content: center;
}

.nav ul li a {
  float: left;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
  margin: 0 30px;
  transition: all 0.5s;
}

#black {
  color: #000;
}

.nav ul li a:hover {
  color: #000;
}

.productInfo-header {
  position: relative;
  height: 210px;
  background: url("@/assets/backpic6.jpg") no-repeat;
  background-size: cover;
}

.productInfo-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.productInfo-logo img {
  width: 170px;
  height: 180px;
}

.productInfo-content {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.productInfo-content h1 {
  font-size: 25px;
  margin: 50px 0 20px 0;
}

.pic-size {
  width: 445px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#information1 {
  font-size: 18px;
  text-align: left;
  padding: 37px;
}

#information1 th,
#information2 th {
  padding: 10px 30px;
}

#information2 {
  font-size: 18px;
  text-align: left;
  margin-bottom: 40px;
}

.footer {
  width: 100%;
  height: 104px;
  color: #fff;
  background-color: #4d4d4d;
  padding-top: 20px;
  text-align: center;
}

.footer a {
  color: #fff;
}

.footer a:hover {
  text-decoration: underline;
}
</style>